// 处方预览
import React from "react";
import store from 'store';
import { Row, Col, Card } from "antd";
import '../style/outpha.less';

/*
处方预览所需参数（可以参照处方审核界面传参 --- PrescriptionChecking ）

	1、setMessage：国际化方法
	2、mainInfoObj：主数据 --- 科室，病人ID……      ----- 对象
	3、basicHeight： 除去预览高度 --- 查询栏高度
	4、rowId：数据列表选中行ID
	5、detailData：PR明细数据 ---- 数组

*/

export default class PreviewOfPrescription extends React.Component {
	// 西药时需要处理关联医嘱
	processAssociatedData = (data) => {
		let tempArr = [];
		let afterData = [];
		if (!(data && data.length > 0)) {
			return afterData;
		}
		for (let i = 0; i < data.length; i++) {
			if (tempArr.indexOf(data[i].ordMainID) === -1) {
				afterData.push({
					ordMainID: data[i].ordMainID,
					children: [data[i]]
				});
				tempArr.push(data[i].ordMainID);
			} else {
				for (let j = 0; j < afterData.length; j++) {
					if (afterData[j].ordMainID == data[i].ordMainID) {
						afterData[j].children.push(data[i]);
						break;
					}
				}
			}
		}
		// console.log(afterData);
		return afterData;
	}

	render() {
		let { mainInfoObj, basicHeight, rowId, detailData } = this.props

		let colTop = {
			xs: { span: 12 },
			sm: { span: 12 },
			md: { span: 10 },
			lg: { span: 10 },
			xl: { span: 10 },
			xxl: { span: 8 }
		};
		let colBottom = {
			xs: { span: 12 },
			sm: { span: 12 },
			md: { span: 14 },
			lg: { span: 14 },
			xl: { span: 14 },
			xxl: { span: 16 }
		}
		return (
			<Card
				size="small"
				title=""
				// title={this.props.setMessage("PrescriptionReviewprescriptionNotes", "descripts", "处方笺")}
				// extra={<a href="#">More</a>}
				className="prescription"
			>
				<div style={{ height: store.getState().tableHeight.y + 197 - basicHeight + 'px', overflow: 'hidden' }}>
					<p style={{ textAlign: 'center', display: !rowId ? 'block' : 'none', textDecoration: 'underline', paddingTop: "24px" }}>{this.props.setMessage("PrescriptionReviewviewPrescriptionFormTips", "descripts", "选择左侧处方来查看处方单")}</p>
					{/* 麻醉剂药品处方：'pink'、急诊处方：、儿科处方：、普通处方：#fff */}
					<div style={{
						width: '100%',
						height: '100%',
						display: rowId ? 'block' : 'none',
						background: mainInfoObj && mainInfoObj.backGroupColor ? mainInfoObj.backGroupColor : '#fff'
					}}>
						<div style={{ borderBottom: '1px solid #ccc', paddingTop: "24px" }}>
							<h1 style={{ textAlign: 'center', position: 'relative', fontSize: '24px', marginBottom: '24px' }}>
								{mainInfoObj.hospDesc}{this.props.setMessage("PrescriptionReviewprescriptionNotes", "descripts", "处方笺")}
								<span style={{ position: 'absolute', right: '10px', top: '10px', fontSize: '14px', fontWeight: 100, textAlign: 'right', color: 'rgba(153,153,153,1)' }}>
									<Row>{mainInfoObj.prescType}</Row>
									{/*<Row>{this.props.setMessage("PrescriptionReviewordPrescNo", "descripts", "处方号")}：{mainInfoObj.ordPrescNo}</Row>*/}
								</span>
							</h1>
							<div style={{ padding: '0 48px 12px', fontSize: '14px' }}>
								<Row>
									<Col span={8}>
										{this.props.setMessage("PrescriptionReviewcostCategory", "descripts", "费别")}{mainInfoObj.admReasonDesc}
									</Col>
									<Col span={8}>
										{this.props.setMessage("PrescriptionReviewordPrescNo", "descripts", "处方号")}：{mainInfoObj.ordPrescNo}
									</Col>
									<Col span={8}>
										{this.props.setMessage("PrescriptionReviewdate", "descripts", "开具日期")}{mainInfoObj.ordDate}
									</Col>


									{/*<Col span={6}>*/}
									{/*{this.props.setMessage("PrescriptionReviewpatID", "descripts", "病人ID")}{mainInfoObj.patNo}*/}
									{/*</Col>*/}


								</Row>
								<Row style={{ margin: '4px 0' }}>
									<Col span={8}>
										{this.props.setMessage("PrescriptionReviewpatName", "descripts", "患者")}{mainInfoObj.patName}
									</Col>
									<Col span={8}>
										{this.props.setMessage("PrescriptionReviewpatSexDesc", "descripts", "性别")}{mainInfoObj.patSexDesc}
									</Col>
									<Col span={8}>
										{this.props.setMessage("PrescriptionReviewpatAge", "descripts", "年龄")}{mainInfoObj.patAge}
									</Col>

								</Row>
								<Row>
									<Col span={8}>
										{this.props.setMessage("PrescriptionReviewpatNo", "descripts", "登记号")}{mainInfoObj.patNo}
									</Col>
									{/*<Col span={6}>*/}
									{/*{this.props.setMessage("PrescriptionReviewpatWeight", "descripts", "体重")}{mainInfoObj.patWeight}*/}
									{/*</Col>*/}
									<Col span={8}>
										{this.props.setMessage("PrescriptionReviewloc", "descripts", "科室")}{mainInfoObj.ordLocDesc}
									</Col>
									<Col span={8}>
										{this.props.setMessage("PrescriptionReviewdrugLoc", "descripts", "发药科室")}{mainInfoObj.drugLoc}
									</Col>
								</Row>

								<Row style={{ margin: '4px 0' }}>
									{this.props.setMessage("PrescriptionReviewphoneAddress", "descripts", "电话/地址：")}{mainInfoObj.phoneAddress}
								</Row>
								<Row>
									{this.props.setMessage("PrescriptionReviewadmDiag", "descripts", "临床诊断")}{mainInfoObj.admDiag}
								</Row>
							</div>
						</div>
						{/* mainInfoObj.cmPrescFlag === '1' 中草药格式 */}
						<div
							style={{
								borderBottom: '1px solid #ccc', padding: '0 24px',
								height: store.getState().tableHeight.y - 91 - basicHeight + 'px', overflow: 'auto'
							}}
							className="pr-style prescription-bar"
						>
							<h1 style={{ fontSize: '20px' }}>Rp:</h1>
							{mainInfoObj.cmPrescFlag === '1' ? <div className="marginRight">
								<Row>
									{detailData && detailData.map((item, index) => {
										return (
											<Col span={8} key={index} style={{ marginBottom: '20px' }}>
												{item.medDesc}
												<span style={{ marginLeft: '8px', position: 'relative', display: 'inline-block' }}>
													{item.ordQty + item.ordUnitDesc}
													{item.ordCMNote ? <b style={{ position: 'absolute', top: '-8px', right: '-30px', fontWeight: 900, fontSize: '12px', color: 'blue', display: 'inline-blick' }}>{'(' + item.ordCMNote + ')'}</b> : ''}
												</span>
											</Col>
										)
									})}
								</Row>
								<div style={{ textAlign: 'center', paddingRight: '150px' }}>
									--------------------------------------------------
									<span style={{ fontWeight: '900' }}>{this.props.setMessage("PrescriptionReviewblank", "descripts", "(以下空白)")}</span>
									--------------------------------------------------
								</div>
								<Row style={{ fontWeight: '900', }}>
									{this.props.setMessage("PrescriptionReviewusage", "descripts", "用法")}：{mainInfoObj.cmFreqDesc + '，' + mainInfoObj.cmExplainDesc + '，' + mainInfoObj.cmUsageDesc}
									<span style={{ margin: '0 8px' }}>{this.props.setMessage("PrescriptionReviewtotal", "descripts", "共：") + mainInfoObj.cmFac + this.props.setMessage("PrescriptionReviewdoses", "descripts", "剂")}</span>
									{mainInfoObj.cmCookTypeDesc}
									{/*<span>*/}
									{/*{console.log('itemitem中药',item)}*/}
									{/*{*/}
									{/*(item&&item.children&&item.children.length > 1 ? '' : item.children[0].note + ': ')*/}
									{/*(item&&item.children&&item.children.length > 1 ? '' : item.children[0].skinTestWayDesc)*/}
									{/*}*/}
									{/*</span>*/}
								</Row>
							</div> : <div>
								<ul style={{ fontSize: '14px', paddingLeft: '24px' }}>
									{this.processAssociatedData(detailData).map((item, index) => {
										let childrenArr = item.children && item.children.length ? item.children : [];
										let num = item.children && item.children.length ? item.children.length : 0;
										return (
											<li key={index}>
												<div style={{ paddingLeft: "24px", position: 'relative' }} className="prescription-list">
													<span style={{ position: "absolute", left: 0, top: 0, display: 'inline-block', lineHeight: "30px" }}>{index + 1}、</span>
													{item.children && item.children.map((childItem, childIndex) => {
														return (
															<div key={childIndex} style={{ lineHeight: "30px" }}>
																<span style={{ display: "inline-block", width: "300px" }}>{childItem.medDesc}</span>
																<span style={{ display: "inline-block", width: "250px", marginRight: "50px", textAlign: "right" }}>
																	{childItem.medSpec}
																	<span style={{ margin: '0 6px' }}>x</span>
																	{childItem.ordQty + childItem.ordUnitDesc}
																</span>
																<span style={{ display: num > 1 ? "inline-block" : "none", width: "60px", textAlign: "right", borderRight: '1px solid #333', paddingRight: '10px' }}>
																	{childItem.ordDoseUnitDesc}
																</span>
																<span style={{ display: num > 1 ? "inline-block" : "none" }} className={num > 1 ? "show-last-span" : ""}>
																	<span style={{ margin: "0 10px" }}>X</span> {childItem.ordDurationDesc}
																</span>
															</div>
														)
													})}
												</div>
												<Row className="marginRight">{this.props.setMessage("PrescriptionReviewusage", "descripts", "用法")}：{
													(item && item.children && item.children.length > 1 ? '' : item.children[0].ordDoseUnitDesc) + ' ' +
													(item && item.children && item.children[0] && item.children[0].ordFreqDesc ? item.children[0].ordFreqDesc : "") + ' ' +
													(item && item.children && item.children[0] && item.children[0].ordUsageDesc ? item.children[0].ordUsageDesc : "") + ' ' +
													(item && item.children && item.children.length > 1 ? '' : item.children[0].ordDurationDesc)
												}
													<span style={{ marginLeft: '50px' }}>
														{item && item.children && item.children.length > 1 ? '' : item.children[0].note}
													</span>
													<span style={{ marginLeft: '20px' }}>
														{item && item.children && item.children.length > 1 ? '' : item.children[0].skinTestWayDesc}
													</span>
												</Row>
											</li>
										)
									})}
								</ul>
								<div className="diagonal"></div>
							</div>}
						</div>
						<div style={{ padding: '12px' }}>
							<Row style={{ marginBottom: '4px' }}>
								<Col span={8}>
									<Row>
										<Col {...colTop} className="alignRight">{this.props.setMessage("PrescriptionReviewdoctorSignName", "descripts", "医生签名")}</Col>
										<Col {...colBottom} style={{ position: "relative" }}>
											{mainInfoObj && mainInfoObj.docStamp ? (
												// <span style={{
												// 	display: "inline-block", position: "absolute",
												// 	width: "100px", height: "36px", top: "-10px",
												// 	background: "url(" + mainInfoObj.docStamp + ") no-repeat",
												// 	backgroundSize: "contain"
												// }}></span>
												<img style={{ position: "absolute", width: "100px", height: "36px", top: "-10px" }} src={mainInfoObj.docStamp} alt="" />
											) : (
												<span>{mainInfoObj.ordDocDesc}</span>
											)}
										</Col>
									</Row>
								</Col>
								<Col span={8}>
									<Row>
										<Col {...colTop} className="alignRight">{this.props.setMessage("PrescriptionReviewcheck", "descripts", "审核")}</Col>
										<Col {...colBottom} style={{ position: "relative" }}>
											{mainInfoObj && mainInfoObj.dispUserStamp ? (
												// <span style={{ 
												// 	display: "inline-block", position: "absolute", 
												// 	width: "100px", height: "36px", top: "-10px", 
												// 	background: "url(" + mainInfoObj.dispUserStamp + ") no-repeat", 
												// 	backgroundSize: "contain" }}></span>
												<img style={{ position: "absolute", width: "100px", height: "36px", top: "-10px" }} src={mainInfoObj.dispUserStamp} alt="" />
											) : (
												<span>{mainInfoObj.auditUserName}</span>
											)}
										</Col>
									</Row>
								</Col>
								<Col span={8}>
									<Row>
										<Col {...colTop} className="alignRight">{this.props.setMessage("PrescriptionReviewamount", "descripts", "金额")}</Col>
										<Col {...colBottom}>{mainInfoObj.prescAmt}</Col>
									</Row>
								</Col>
							</Row>
							<Row>
								<Col span={8}>
									<Row>
										<Col {...colTop} className="alignRight">{this.props.setMessage("PrescriptionReviewprovisioning", "descripts", "调配")}</Col>
										<Col {...colBottom}>{mainInfoObj.prepUserName ? mainInfoObj.prepUserName : ""}</Col>
									</Row>
								</Col>
								<Col span={8}>
									<Row>
										<Col {...colTop} className="alignRight">{this.props.setMessage("PrescriptionReviewverify", "descripts", "核对")}</Col>
										<Col {...colBottom}>{mainInfoObj.auditUserName}</Col>
									</Row>
								</Col>
								<Col span={8}>
									<Row>
										<Col {...colTop} className="alignRight">{this.props.setMessage("PrescriptionReviewdrugDistribution", "descripts", "发药")}</Col>
										<Col {...colBottom}>{mainInfoObj.dispUserName}</Col>
									</Row>
								</Col>
							</Row>
							{/* <p style={{textAlign: 'center', marginTop: '12px', marginBottom: 0}}>本处方当前有效</p> */}
						</div>
					</div>
				</div>
			</Card>
		)
	}
}
